<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			div#total {
				display: flex;
				margin-top: 50px;
				
			}

			div#left {
				width: 400px;
				height: 400px;
				border: 1px solid gray;
				position: relative;
			}

			div#right {
				width: 804px;
				height: 400px;
				display: flex;
				flex-wrap: wrap;
			}
			#r1,
			#r2,
			#r3,
			#r4 {
				width: 400px;
				height: 200px;
				border: 1px solid gray;
				/* float: left; */
				overflow: hidden;
				position: relative;
			}
			.w{
				font-weight: bold;
			}
			#r1 img{
				position: absolute;;
				right: 0px;
				bottom: 20px;
			}
			#r2 img{
				position: absolute;;
				right: 0px;
				bottom: 20px;
			}
			#r3 img{
				position: absolute;;
				right: 0px;
				bottom: 20px;
			}
			#r4 img{
				position: absolute;;
				right: 0px;
				bottom: 20px;
			}
			
			p{
				line-height: 20px;
				height:20px;
				padding-left: 20px;
				padding-top: 30px;
			}
			#left p{
				line-height: 50px;
				height:50px;
				padding-left: 30px;
				padding-top: 50px;
			}
			#left img{
				position: absolute;
				right:30px;
				bottom: 50px;
			}
			img:hover{
				transform: translateX(-12px);
				transition: 1s ease-out;
			}
		</style>
	</head>
	<body>
		<div id="total">
			<div id="left">
				<p class="w">超级信用卡</p>
				<p>线上线下课累计彩贝积分</p>
				<img src="1.bmp">
			</div>
			<div id="right">
				<div id="r1">
					<p class="w">彩贝抢霸</p>
					<p>每天10点更新</p>
					<img src="2.bmp">
				</div>
				<div id="r2">
					<p class="w">热门优惠劵</p>
					<p>全场免费领取</p>
					<img src="3.bmp">
				</div>
				<div id="r3">
					<p class="w">促销活动</p>
					<p>汇集全网优惠</p>
					<img src="4.bmp">
				</div>
				<div id="r4">
					<p class="w">精挑细选</p>
					<p>给你最好的选择</p>
					<img src="5.bmp">
				</div>
			</div>
		</div>
	</body>
</html>
